<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="contactList h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" left-icon="left" backgroundColor="#FF7C00" dark title="联系记录" :border="false" @clickLeft="back" />
    </view>
    <view :style="globalData.appStyle.contentStyle">
      <view class="tagBox flr w100p">
        <text v-for="(item, index) in tagList" :key="item" class="tag mr10" :class="{ activeTag: index === curIdx }" @click.stop="tagClick(index)">{{ item }}</text>
      </view>
      <DealList v-if="curIdx === 0" :tagIndex="contactIdx" />
      <AppraiseList v-else-if="curIdx === 1" />
      <CollectList v-else />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
import CallTips from '@/component/call-phone-tips/index.vue';
import ToBeEvaluated from '@/component/ToBeEvaluated.vue';
import DealList from './dealList.vue';
import AppraiseList from './appraiseList.vue';
import CollectList from './collectList.vue';
export default {
  mixins: [commonMxins],
  components: { CallTips, ToBeEvaluated, DealList, AppraiseList, CollectList },
  data() {
    return {
      keywords: '',
      contactList: [],
      tagList: ['拨打记录', '评价', '收藏'],
      curIdx: 0,
      contactIdx: 0,
      targetIdInfo: {}
    };
  },
  onLoad(option) {
    if (option.contactIdx) {
      this.contactIdx = Number(option.contactIdx);
    }
    if (option.curIdx) {
      this.curIdx = Number(option.curIdx);
      debugger;
    }
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    tagClick(index) {
      this.curIdx = index;
    }
  }
};
</script>
<style lang="scss" scoped>
.contactList {
  .tagBox {
    padding: 20rem;
    box-sizing: border-box;
    height: 72rem;
    .tag {
      text-align: center;
      padding: 0 10rem;
      height: 32rem;
      border-radius: 5rem;
      box-sizing: border-box;
      border: 1rem solid rgba(255, 124, 0, 1);
      line-height: 32rem;
      font-size: 16rem;
      color: rgba(255, 124, 0, 1);
      &.activeTag {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(255, 202, 153, 1) 0%, rgba(252, 122, 0, 1) 100%);
      }
    }
  }
}
</style>
